<template>
  <div>
    <el-container>
      <el-header>
        <div>
          <h1 style="color: #ffffff">我的题库</h1>
        </div>
      </el-header>
      <el-main>
        <br /><br />
        <Row>
          <Col span="24">
            <div>
              <!-- <h2>{{ $route.query.value }}</h2> -->
              <Button @click="addQuestion" style="margin-left: 20px" type="primary"
                >创建题目</Button
              >
              <!-- <Button
                @click="exportQuestionBank = true"
                style="margin-left: 50px"
                type="primary"
                >导入题库</Button
              > -->
              <span>选择题目类型</span>
              <Select v-model="questionTypes" style="width: 200px">
                <Option
                  v-for="(item, index) in questionTypeList"
                  :value="item.value"
                  :key="index"
                  @click.native="selectQuestionType(index)"
                  >{{ item.label }}</Option
                >
              </Select>
            </div>
          </Col>
        </Row>
        <Row>
          <Col>
            <!-- <span style="margin-left: 50px;">课程：</span> -->
            <!-- <Select v-model="class" disabled style="width:200px">
            <Option v-for="item in cityList" :value="item.value" :key="item">{{ item.label }}</Option>
          </Select> -->
            <Table :data="questionData" :columns="tableColumns">
              <template #action="{ index }">
                <Button
                  type="primary"
                  size="small"
                  style="margin-right: 10px"
                  @click="viewQuestion(index)"
                  >查看</Button
                ><Button
                  type="warning"
                  size="small"
                  style="margin-right: 10px"
                  @click="changeQuestion(index)"
                  >编辑</Button
                >
                <Button type="error" size="small" @click="removeQuestion(index)"
                  >删除</Button
                >
              </template></Table
            >
            <!-- <div style="margin: 10px;overflow: hidden">
              <div style="float: right;">
                  <Page :total="100" :current="1" @on-change="changePage"></Page>
              </div>
          </div> -->
          </Col>
        </Row>
      </el-main>
    </el-container>
    <Modal v-model="exportQuestionBank" title="导入题库">
      <Input
        v-model="emailInfo.fileName"
        placeholder="请上传题库excel"
        style="width: 100%"
        v-if="emailInfo.type == 'excel'"
        :readonly="emailInfo.type == 'excel' ? true : false"
      />
      <Upload
        :disabled="emailInfo.type != 'excel'"
        type="select"
        :before-upload="gatherFile"
        action="/visualResourceLibrary/questionnaire/excelQuesBank/add"
      >
        <Button :disabled="emailInfo.type != 'excel'">上传</Button>
      </Upload>

      <div slot="footer" style="display: inline-block">
        <i-button
          type="primary"
          @click="addQuestionBankFromExcel('emailInfo')"
          style="float: right"
          >确认</i-button
        >
        <i-button style="float: right; margin-right: 15px">取消</i-button>
      </div>
    </Modal>
    <Modal v-model="viewQuestionModal" title="查看题目">
      <div>
        <p>{{ selectedQuestion.stem }}</p>
        <!-- <span style="text-align: left">({{ ques.score }}分)</span> -->
        <p
          v-if="questionType === 0"
          v-for="(opt, option) in selectedQuestion.options"
          :key="option"
        >
          {{ opt }}
        </p>
        <p>正确答案：{{ selectedQuestion.answer }}</p>
      </div>
    </Modal>
    <Modal
      v-model="addQuestionModal"
      @on-ok="addQuestionIntoQuestionBank"
      title="添加题目"
    >
      <div>
        <span>选择添加的题目类型</span>
        <Select v-model="questionTypeSelected" style="width: 200px">
          <Option v-for="(type, id) in questionTypeList" :value="type.value" :key="id">{{
            type.label
          }}</Option>
        </Select>
        <br />

        <span>题干：</span>
        <Input
          v-model="addStem"
          type="textarea"
          :rows="2"
          placeholder="请输入题干信息"
        ></Input>
        <br />

        <div v-if="questionTypeSelected == 'singleSelect'">
          <br />
          <span>
            A：

            <Input
              v-model="addOptionA"
              placeholder="请输入..."
              style="width: 300px"
            ></Input>
          </span>

          <p>
            B：
            <Input
              v-model="addOptionB"
              placeholder="请输入..."
              style="width: 300px"
            ></Input>
          </p>

          <p>
            C：
            <Input
              v-model="addOptionC"
              placeholder="请输入..."
              style="width: 300px"
            ></Input>
          </p>

          <p>
            D：
            <Input
              v-model="addOptionD"
              placeholder="请输入..."
              style="width: 300px"
            ></Input>
          </p>
          <br />
          <span>答案：</span>
          <Select v-model="addAnswer" style="width: 200px">
            <Option
              v-for="(answer, index) in optionsAnswerList"
              :value="answer.value"
              :key="index"
              >{{ answer.label }}</Option
            >
          </Select>
        </div>

        <div v-if="questionTypeSelected == 'fillInBlank'">
          <span
            >答案：<Input
              v-model="addAnswer"
              placeholder="请输入..."
              style="width: 300px"
            ></Input
          ></span>
        </div>
        <div v-if="questionTypeSelected == 'judgement'">
          <span
            >答案：
            <Select v-model="addAnswer" style="width: 200px">
              <Option
                v-for="(answer, index) in judgementAnswerList"
                :value="answer.value"
                :key="index"
                >{{ answer.label }}</Option
              >
            </Select>
          </span>
        </div>
        <div v-if="questionTypeSelected == 'quesAndAnswer'">
          <span
            >答案：<Input
              v-model="addAnswer"
              type="textarea"
              :rows="2"
              placeholder="请输入答案"
            ></Input>
          </span>
        </div>
        <p>答案解析：</p>
        <Input
          v-model="addAnalysis"
          type="textarea"
          :rows="2"
          placeholder="请输入解析内容"
        ></Input>
      </div>
    </Modal>

    <Modal v-model="changeQuestionModal" title="修改题目" @on-ok="changeQuestionContent">
      <div>
        <span>题干：</span>
        <Input v-model="questionStem" type="textarea" :autosize="true"></Input>
        <!-- <Input  v-model="questionOptions" type="textarea" :autosize="true"></Input> -->
        <p
          v-if="questionType === 0"
          v-for="(opt, option) in selectedQuestion.options"
          :key="option"
        >
          {{ opt }}
        </p>
        <!-- <Input v-model="questionOptionA" type="textarea" :autosize="true"></Input>
        <Input v-model="questionOptionB" type="textarea" :autosize="true"></Input>
        <Input v-model="questionOptionC" type="textarea" :autosize="true"></Input>
        <Input v-model="questionOptionD" type="textarea" :autosize="true"></Input> -->
        <span>正确答案：</span>
        <Input v-model="questionAswer" type="textarea" :autosize="true"></Input>
        <span>答案解析：</span>
        <Input v-model="questionAnalysis" type="textarea" :autosize="true"></Input>
      </div>
    </Modal>
  </div>
</template>
<script>
import { get, post, del, put } from "@/axios";
export default {
  data() {
    return {
      userId: "123456",
      questionType: 0,
      questionTypes: "",
      questionBank: [],
      viewQuestionModal: false,
      changeQuestionModal: false,

      questionTypeSelected: "singleSelect",
      addQuestionModal: false,
      addOptionA: "",
      addOptionB: "",
      addOptionC: "",
      addOptionD: "",
      addAnswer: "",
      addAnalysis: "",
      questionStem: "",
      questionAswer: "",
      judgementAnswerList: [
        {
          value: true,
          label: "对",
        },
        {
          value: false,
          label: "错",
        },
      ],
      optionsAnswerList: [
        {
          value: "A",
          label: "A",
        },
        {
          value: "B",
          label: "B",
        },
        {
          value: "C",
          label: "C",
        },
        {
          value: "D",
          label: "D",
        },
      ],

      qustionOptions: [],
      questionAnalysis: "",
      selectedQuestion: [],
      addStem: "",
      id: "",
      exportQuestionBank: false,
      questionData: [],
      emailInfo: {
        type: "excel",
        file: null,
        fileName: "",
        userIds: "",
      },
      questionTypeList: [
        {
          value: "singleSelect",
          label: "单选题",
        },
        {
          value: "fillInBlank",
          label: "填空题",
        },
        {
          value: "judgement",
          label: "判断题",
        },
        {
          value: "quesAndAnswer",
          label: "简答题",
        },
      ],
      tableColumns: [
        {
          type: "selection",
          width: 60,
          align: "center",
        },
        {
          title: "题目信息",
          key: "stem",
        },
        {
          title: "题目类型",
          key: "type",
        },
        {
          title: "创建时间",
          key: "createTime",
          render: function (h, params) {
            return h(
              "div",
              new Date(this.row.createTime).Format("yyyy-MM-dd")
            ); /*这里的this.row能够获取当前行的数据*/
          },
        },
        {
          title: "操作",
          key: "actions",
          slot: "action",
          fixed: "right",
          width: 240,
        },
      ],
    };
  },
  mounted() {
    this.viewQuestionBank();
  },
  methods: {
    async addQuestionIntoQuestionBank() {
      let formData = new FormData();
      let options =
        this.addOptionA +
        "\n" +
        this.addOptionB +
        "\n" +
        this.addOptionC +
        "\n" +
        this.addOptionD;
      // console.log(options);

      formData.append("type", this.questionTypeSelected);
      formData.append("stem", this.addStem);
      formData.append("options", options);
      formData.append("answer", this.addAnswer);
      formData.append("analysis", this.addAnalysis);
      formData.append("quesBankId", this.questionBank.info.id);
      // console.log(formData);

      try {
        let res = await post("/visualResourceLibrary/questionnaire/ques/add", formData);
        // console.log(res.data.data);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },

    async changeQuestionContent() {
      let formData = new FormData();
      let type = "singleSelect";
      if (this.questionType === 0) {
        type = "singleSelect";
        formData.append("type", type);
      } else if (this.questionType === 1) {
        type = "fillInBlank";
        formData.append("type", type);
      } else if (this.questionType === 2) {
        type = "judgement";
        formData.append("type", type);
      } else if (this.questionType === 3) {
        type = "quesAndAnswer";
        formData.append("type", type);
      }
      // console.log(type);
      formData.append("stem", this.questionStem);
      formData.append("answer", this.questionAswer);
      formData.append("options", this.qustionOptions);
      formData.append("analysis", this.questionAnalysis);

      try {
        let res = await post(
          "/visualResourceLibrary/questionnaire/ques/update",
          formData
        );
        // console.log(res.data.data);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    viewQuestion(index) {
      this.selectedQuestion = this.questionData[index];
      // console.log(this.selectedQuestion);
      // console.log(this.selectedQuestion.options);
      this.viewQuestionModal = true;
    },
    changeQuestion(index) {
      this.selectedQuestion = this.questionData[index];
      // console.log(this.selectedQuestion);
      // console.log(this.selectedQuestion.options);
      this.questionStem = this.selectedQuestion.stem;
      // console.log(this.questionStem);
      this.questionAswer = this.selectedQuestion.answer;
      this.questionAnalysis = this.selectedQuestion.analysis;
      this.changeQuestionModal = true;
    },
    addQuestion() {
      this.addQuestionModal = true;
    },
    async removeQuestion(index) {
      this.selectedQuestion = this.questionData[index];
      let id = this.selectedQuestion.id;
      try {
        let res = await get("/visualResourceLibrary/questionnaire/ques/del/" + id);
        // console.log(res.data.data);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
    selectQuestionType(index) {
      // console.log(index);
      if (index === 0) {
        this.questionData = this.questionBank.singleSelect;
       
        this.questionType = 0;
      } else if (index === 1) {
        this.questionData = this.questionBank.fillInBlank;
      
        this.questionType = 1;
      } else if (index === 2) {
        this.questionData = this.questionBank.judgement;
       
        this.questionType = 2;
      } else if (index === 3) {
        this.questionData = this.questionBank.quesAndAnswer;
      
        this.questionType = 3;
      }
    },
    gatherFile(file) {
      this.emailInfo.file = file;
      // console.log(this.userId);
      // console.log(this.emailInfo.file);
      this.emailInfo.fileName = file.name;
      // console.log(file);
      return false;
    },
    async viewQuestionBank(name) {
      try {
        let res = await get(
          "/visualResourceLibrary/questionnaire/quesBank/" + this.$route.query.value
        );
        this.questionBank = res.data.data;
        // console.log(this.questionBank);
        // console.log(this.questionBank.fillInBlank);
        this.questionData = this.questionBank.singleSelect;
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },

    async addQuestionBankFromExcel(name) {
      let formData = new FormData();
      formData.append("file", this.emailInfo.file); // file为上传的文件
      // console.log(this.emailInfo.file);
      formData.append("type", this.emailInfo.type);
      // console.log(formData);
      try {
        let res = await post(
          "/visualResourceLibrary/questionnaire/excelQuesBank/add",
          formData
        );
        this.questionBank = res.data.data;
        // console.log(this.questionBank);
        // console.log(this.questionBank.fillInBlank);
        // console.log(res);
      } catch (e) {
        this.$Message.error("修改失败");
        console.log(e);
      }
    },
  },
};
</script>

<style>
.button {
  background-color: #ccc;
  color: #fff;
  border: none;
  padding: 10px;
  cursor: pointer;
}

.button.active {
  background-color: #f00;
}
.createTaskBtn {
  font-size: 10px;
}
.createTaskBtn:hover {
  color: white;
  background: #276be9;
}
.el-header {
  background-color: #152350c4;
  color: #333;
  text-align: center;

  line-height: 60px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;

  line-height: 20px;
}
.right-align {
  float: right;
}
</style>
